import React, { PropTypes, Component } from 'react'
import classnames from 'classnames'
import CptDrawer from './CptDrawer'
import WidgetContainer from './WidgetContainer'

import RaisedButton from 'material-ui/RaisedButton';

const styles={
  sectionMenu:{
    position:'absolute',
    right: 5,
    top: 5

  }
}
class Banner extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      btnVisible:false,
      drawerOpen:false
    }
  }
  onMouseEnter() {
    this.setState({
      btnVisible:true
    })
  }
  onMouseLeave() {
    this.setState({ 
      btnVisible:false
    })
  }
  handleDrawerToggle = () => this.setState({drawerOpen: !this.state.drawerOpen});
  
render() {
    let { component ,actions }=this.props
    let widgets=component.widgets||[]
    return (
      <div>
      <div className={classnames('section','banner',
                                {'edit-border':this.state.btnVisible})}
           onMouseEnter={this.onMouseEnter.bind(this)}
           onMouseLeave={this.onMouseLeave.bind(this)}
           
           style={
            component.styles
           }
      >
         <div className="wrap">
         {this.state.btnVisible?<RaisedButton label="组件菜单" style={styles.sectionMenu} secondary={true} onClick={this.handleDrawerToggle} />:null}
       
          <WidgetContainer  widgets={widgets} positionId={this.props.positionId} 
                            handleWidgetMenuShow={this.props.handleWidgetMenuShow} >
                            
          </WidgetContainer>
          </div>
               
      </div>
        <CptDrawer
                        key={component.positionId}   
                        component={ component }  
                        componentSetStyle={actions.componentSetStyle}  
                        widgetToggleEnable={actions.widgetToggleEnable}  
                        drawerOpen={this.state.drawerOpen}
                        handleDrawerToggle={this.handleDrawerToggle.bind(this)}
                        handleDialogImgToggle={this.props.handleDialogImgToggle}
                       
            />
      </div> 

    )
  }
}

Banner.propTypes = {
  component:PropTypes.object.isRequired
}

export default Banner
